<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .title {
      /* font-size: '50px'; */
      font-size: 50px;
      /* color: 'red'; */
      color: red;
    }
  </style>
</head>

<body>
  <div id="root">
    <!-- 伪代码 -->
    <!-- <h2 :style="{key(属性名):value(属性值)}">{{message}}</h2> -->

    <!-- 写法一：报错原因：把50px当成变量了，去data里面找不到该变量，所以导致编译错误 -->
    <!-- <h2 :style="{font-size:50px}">{{message}}</h2> -->

    <!-- 现在50px被当成字符串进行解析 -->
    <!-- <h2 :style="{font-size:'50px'}">{{message}}</h2> -->

    <!-- 写法二：驼峰标识 -->
    <!-- key这里不需要加单引号，但是value这里一定要加上单引号 -->
    <h2 :style="{fontSize:'50px'}">{{message}}</h2>
    <!-- finalSize当成一个变量来使用 -->
    <h2 :style="{fontSize:finalSize}">{{message}}</h2>
    <h2 :style="{fontSize:size + 'px',color:finalColor}">{{message}}</h2>
    <h2 :style="getStyles()">{{message}}</h2>
  </div>
  <script src="../practice_project/js/vue.js"></script>
  <script>
    const root = new Vue({
      el: '#root',
      data: {
        message: 'Vue.js',
        finalSize: '50px',
        size: 50,
        finalColor: 'red'
      },
      methods: {
        getStyles: function () {
          return {
            fontSize: this.size + 'px',
            color: this.finalColor
          }
        }
      }
    })
  </script>
</body>

</html>